<template>
  <view class="content">
    <view class="info">
      <view class="info_item">
        <view class="item_head">
          <image :src="data.user.avatarUrl || '../../static/head.png'"></image>
        </view>
        <view class="item_info">
          <button open-type="chooseAvatar" @chooseavatar="avatar">
            修改头像
            <van-icon name="arrow" />
          </button>
        </view>
      </view>
      <view class="info_item">
        <view class="item_text">昵称</view>
        <view class="item_info" @click="putxgname">
          {{ data.user.name }}
          <van-icon name="arrow" />
        </view>
      </view>
      <view class="info_item">
        <view class="item_text">手机号</view>
        <view class="item_info" @click="putphone">
          {{ data.user.mobile }}
          <van-icon name="arrow" />
        </view>
      </view>
      <view class="info_item">
        <view class="item_text">会员ID</view>
        <view class="item_info">{{ data.user.id }}</view>
      </view>
      <view class="info_item">
        <view class="item_text">积分</view>
        <view class="item_info">{{ data.user.points }}</view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import { err, toast, get, set } from '@/utils/uniapi';
import { onShow } from '@dcloudio/uni-app';
import { api } from '@/api/store_api';
const data = reactive({
  user: { avatarUrl: '', name: '', mobile: '', id: '', points: '' }
});
onShow(() => {
  data.user = get('user');
});
async function user() {
  try {
    const res = await api.getuser();
    if (res.respCode === 200) {
      const user = JSON.parse(res.source);
      data.user=user
      set('user', user);
    }
  } catch (error) {
    err(error);
  }
}
function putxgname() {
  try {
    wx.showModal({
      title: '修改昵称',
      editable: true,
      complete: async (res: any) => {
        if (res.confirm) {
          const datas = {
            id: data.user.id,
            name: res.content
          };
          const { respCode, msg } = await api.putuser(datas);
          if (respCode === 200) {
            user();
            toast('修改成功');
          } else {
            err(msg);
            toast(msg);
          }
        }
      }
    });
  } catch (error) {
    err(error);
    throw error;
  }
}
function avatar(e: any) {
  wx.showLoading({ title: '上传中' });
  let { avatarUrl } = e.detail;
  let timestamp = new Date().valueOf();
  wx.cloud.uploadFile({
    cloudPath: 'head_url/' + timestamp + '.png',
    filePath: avatarUrl,
    success: async (res) => {
      const datas = {
        id: data.user.id,
        avatarUrl: res.fileID
      };
      const { respCode } = await api.putuser(datas);
      if (respCode === 200) {
        toast('修改成功');
        user();
      }
    },
    fail: (err) => {
      console.log(err);
      toast('上传失败');
    }
  });
}
function putphone() {
  wx.showModal({
    title: '修改手机号',
    editable: true,
    complete: (res: any) => {
      if (res.confirm) {
        let mobile = res.content;
        if (!/^1[34578]\d{9}$/.test(mobile)) {
          toast('手机号有误');
        } else {
          let datas = {
            id: data.user.id,
            mobile
          };
          api.putuser(datas).then((res) => {
            if (res.respCode === 200) {
              user();
              toast('修改成功');
            } else {
              toast(res.msg);
            }
          });
        }
      }
    }
  });
}
</script>

<style scoped>
Page {
  background-color: #f3f3f3;
}
.info {
  width: 100%;
  margin-top: 20rpx;
}

.info_item {
  width: 700rpx;
  height: 100rpx;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 10rpx;
  line-height: 100rpx;
  padding-left: 54rpx;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 20rpx;
}

.item_text {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  float: left;
}

.item_head {
  width: 70rpx;
  height: 70rpx;
  border-radius: 8rpx;
  margin-top: 15rpx;
  float: left;
}
button {
  padding: 0;
  margin: 0;
  text-align: right;
}
image {
  width: 100%;
  height: 100%;
}

.item_info {
  width: 50%;
  float: right;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 600;
  margin-right: 19rpx;
  text-align: right;
}
</style>
